<template>
	<view class="">
		<!-- 弹窗电子签名 -->
		<!-- <view class="h100">
			<jp-signature-popup v-model="image" />
			<view>{{image}}</view>
			<view class="but" @click="toPop">自定义样式，弹框调用</view>
			<jp-signature-popup ref="signature" popup v-model="image2" />
			<view class="">
				地方{{image2}}
			</view>
		</view -->
		<!-- 平铺电子签名 -->
		<view style="width: 750rpx ;height: 500rpx;">
			<jp-signature ref="signatureRef"></jp-signature>
		</view>
		<view>
			<button @click="clear">清空</button>
			<button @click="">撤消</button>
			<button @click="save">保存</button>
		</view>
	</view>

</template>
<script>
	export default {
		data() {
			return {
				image: '',
				image2: '',
				url: '',
			}
		},
		methods: {
			// <!-- 弹窗电子签名 -->
			// toPop() {
			// 	this.$refs.signature.toPop()
			// },
			
			// 平铺电子签名
			save() {
				this.$refs.signatureRef.canvasToTempFilePath({
					success: (res) => {
						// 是否为空画板 无签名
						console.log(res.isEmpty)
						// 生成图片的临时路径
						// H5 生成的是base64
						this.url = res.tempFilePath
						console.log(this.url )
					}
				})
			},
			clear() {
				this.$refs.signatureRef.clear()
			},
			undo() {
				this.$refs.signatureRef.undo()
			},
		}
	
	}
</script>

<style lang="scss">
	.but {
		margin: 25px;
		line-height: 40px;
		text-align: center;
		background-color: #55aaff;
		color: #fff;
	}
</style>